<template>
	<view class="container">
		<view class="content-container">
			<template v-if="activeTab === 'home'">
				<SolverHome />
			</template>
			<template v-if="activeTab === 'task'">
				<SolverTask />
			</template>
			<template v-if="activeTab === 'message'">
				<SolverMessage />
			</template>
			<template v-if="activeTab === 'my'">
				<SolverMy />
			</template>
		</view>
		<tabbar />
	</view>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import tabbar from "@/components/tabbar/tabbar.vue";
import { useSeekerTabbarStore } from "@/store/modules/seeker-tabbar";
import SolverHome from "@/pages/seeker/home/index.vue";
import SolverTask from "@/pages/seeker/task/index.vue";
import SolverMessage from "@/pages/seeker/message/index.vue";
import SolverMy from "@/pages/seeker/my/index.vue";

const tabbarStore = useSeekerTabbarStore();

// 当前激活的tab
const activeTab = computed(() => {
	return tabbarStore.activeTab;
});
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
}
.content-container {
	width: 100%;
	height: calc(100% - 75px);
}
</style>
